<!--
 * @Author: wuzhen
 * @Date: 2019-12-03 14:04:35
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-12-06 09:15:24
 * @Description: 视频预览
 -->

<template>
  <div class="pre-video" :style="styleProps">
    <img :src="isHttp?src: 'https://res.squrab.com/' + src" v-if="src && src!==''" />
    <video :src="'https://res.squrab.com/' + preSrc" :style="styleProps" v-else></video>
    <div class="pre-video-cover" :style="styleProps">
      <Icon type="ios-play" @click.native="showVideo=true"></Icon>
    </div>
    <Modal title="视频预览" v-model="showVideo" footer-hide>
      <video :src=" 'https://res.squrab.com/' + preSrc" v-if="showVideo" autoplay controls style="width: 100%"></video>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    isHttp: {
      type: Boolean,
      default: false
    },
    src: {
      type: String,
      default: ""
    },
    video: {
      type: String,
      default: ""
    },
    preSrc: {
      type: String,
      default: ""
    },
    width: {
      type: [String, Number],
      default: 150
    }
  },
  data() {
    return {
      showVideo: false,
      styleProps: {
        width: this.width + "px"
      }
    };
  }
};
</script>
<style lang="less" scoped>
.pre-video {
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  border: 1px solid #eee;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
  margin-right: 15px;
  img {
    width: 100%;
    height: 100%;
  }
  &-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &:hover {
    .pre-video-cover {
      display: block;
    }
  }
}
</style>